<template>
  <div>
    <!-- 发起音乐搜索 -->
    <div class="search-ipt">
      <div class="input-nav-ipt">
        <div class="input-nav-item">
          <div class="input-nav-item-left">
            <i class="fa fa-arrow-left" aria-hidden="true" @click="$router.push('/home')"></i>
          </div>
        </div>
        <div class="input-nav-item-ipt">
          <i class="fa fa-search" aria-hidden="true"></i>
          <input
            class="search"
            type="text"
            placeholder="海阔天空"
            autofocus
            v-model="keyword"
            @input="showSearch"
          />

          <i class="fa fa-times-circle" aria-hidden="true" @click="clearIpt"></i>
        </div>
      </div>        
    </div>
    <!-- 搜索出来的音乐列表 -->
    <div class="down-list" v-if="show">
        <ul class="down-list-ul" v-if="isContent">
            <li class="down-list-li" v-for="(item,index) in searchMusic" :key="item.id" @click="setListId(item.id,searchMusic)">
                <i class="fa fa-search" aria-hidden="true"></i>
                <p class="down-list-p"> {{item.name}}</p>
                <i v-if="isLaba==index" class="iconfont icon-laba la-i"></i>
                
            </li>
        </ul>
        <!-- <div class="down-content" v-else>
          <div class="down-content-item">
            <div class="content-item"></div>
          </div>
        </div> -->
    </div>
    
    <!-- 搜索页面 -->
    <div class="search-box" v-else>
    <!-- 广告位 -->
    <div class="ad-board" v-if="close" >
      <div class="ad-close-box">
        <i class="fa fa-times-circle ad-close" aria-hidden="true"  @click="close=false"></i>
      </div>
    </div>
    <!-- 热搜推荐 -->
    <div class="hot-search">
        <p class="hot-title">热搜榜</p>
        <ul class="hot-search-ul">
            <li class="hot-search-li" v-for="(item,index) in hotMusic" :key="index" @click="getSong(item.first)">
               {{index+1}} &nbsp; {{item.first}}
            </li>
        </ul>
    </div>
    <!-- 精品歌单 -->
    <div class="high-list">
      <p>精品歌单</p>
      <ul class="high-list-ul">
        <li class="high-list-li" v-for="(item,index) in highQuality" :key="item.id" v-show="index<6" @click="jumpHigh(item.id)">
          <img class="high-list-img" :src="item.coverImgUrl" alt="" >
          <div class="high-list-txt">
            {{item.name}}
          </div>
        </li>
                
      </ul>
    </div>
    </div>
  </div>
</template>

<script>
//导入获取数据的接口js文件
import {getSearchMusic,getSearchHot,getHighQuality} from "../../api/recommend"
export default {

  data() {
    return {
        keyword: '',
        hotMusic: [], //热搜榜音乐
        searchMusic:[],//搜索音乐
        highQuality :[],//精品歌单
        show:false, // 搜索歌曲列表显示
        delays: null, //防抖
        close:true, //广告显示
        isContent:true, // 显示点击搜索出来的歌曲列表的歌手详情内容 
        isLaba:null, //显示正在播放
    };
  },
  
  created() {
      //热搜音乐
      this.getSearchHotFun();
      //精品歌单
      this.getHighQualityFun(); 
  },
  methods: {
      //发起搜索音乐
      getSearchMusicFun() {
          getSearchMusic({keywords: this.keyword}).then(data=>{
              
              if(data.code==200) {
                this.searchMusic=data.result.songs;
              }
          })
      },
      // 热搜音乐
      getSearchHotFun() {
          getSearchHot().then(data=>{
              // 
              this.hotMusic=data.result.hots;
          })
      },
      //按键事件 搜索框发起搜索
      showSearch() {
          this.show=true;      
          // 防抖   
          if(this.delays) clearTimeout(this.delays);
            this.delays=setTimeout(() => {
            this.getSearchMusicFun();
            clearTimeout(this.delays);          
        
        }, 500);
          // 搜索框为空回退搜索页
          if(!this.keyword) {
            this.show=false;
            }
      },
      //点击搜索歌曲
      setListId(id,isItem) {
        
        let index= isItem.findIndex(isItem=> isItem.id==id);
        this.isLaba=index;
        //给播放控件 player组件传递歌曲 id
        this.$emit('get-player-id',id);
        // 
      } ,   
      //清空搜索
      clearIpt() {
          this.keyword='';
          this.show=false;
      },
      //获取精品歌单
      getHighQualityFun() {
        getHighQuality().then(data=>{
          // 
          this.highQuality=data.playlists;
        }).catch(err=>{
          
        })
      },
      //跳转到精品歌单
      jumpHigh(id) {
        // 
        this.$router.push({name: 'HighMusic' ,query:{id}});      
      },
      //点击热搜音乐
      getSong(song) {
        this.keyword=song;
        // 调用搜索框发起搜索事件
        this.showSearch();
      }
  }
};
</script>

<style lang="less" scoped>
// 搜索列表
.down-list {
    width:100%;
    position: absolute;
    top:45px;
    left:0;
    font-size:14px;
    .down-list-ul{
        margin: 0 auto;
        text-align: left;
        .down-list-li {
            background-color: #f7f8fa;
            line-height:20px;
            padding:5px 10px;
            padding-right:0;
            display: flex;
            align-items: center;
            .la-i {
              color:#e4393c;
              margin-right: 10px;
            }
            .down-list-p{
                flex:1;
                border-bottom: 1px solid #e7e7e7;
                padding:5px 0;
                margin-left: 10px;

            }
        }
        
    }
}
// 精品歌单
.high-list{
  font-size:14px;  
  text-align: left;
  margin-top: 20px;
  p{
    font-weight:bold;
  }
  .high-list-ul{
    margin-top: 10px;
    display: flex;
    flex-wrap:wrap;
    width:100%;
    .high-list-li{
      width:calc(50% - 10px);
      border-radius: 5px;
      overflow: hidden;
      height:100px;
      position: relative;
      background-color: antiquewhite;
      margin-right: 10px;
      margin-bottom: 10px;
      .high-list-txt{
        color:#fff;
        position: absolute;
        top:45%;
        left:10px;
        z-index:3;
      }
    }
    .high-list-li:nth-child(2n){
      margin-right: 0;
    }
    .high-list-img{
      width:100%;
      position:absolute;
      top:0;
      left:0;
      bottom:0;
      right:0;
    }
  }
}

// 搜索框
.input-nav-ipt {
  background-color: #DB9A9D;
  height: 54px;
  line-height: 54px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .input-nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: bold;
    .input-nav-item-left {
      width: 27px;
      color:#fff;
      font-size: 16px;
      font-weight: normal;
      line-height: 27px;      
    }
  
  }
  .input-nav-item-ipt {
    width: 90%;
    height: 32px;
    font-size: 14px;
    background-color: #f7f8fa;
    border-radius: 32px;
    border: 0;
    outline: none;
    overflow: hidden;
    position: relative;
    top: calc(50% - 26px);
    .fa-search {
      position: absolute;
      left: 15px;
      top: calc(50% - 8px);
      z-index: 99;
      color: #DB9A9D;
      background-color: #f7f8fa;
    }
    .search {
      width: 100%;
      height: 32px;
      border: none;
      outline: none;
      position: absolute;
      left: 0px;
      padding: 0 35px;
      background-color: #f7f8fa;
    }
    .fa-times-circle {
      position: absolute;
      right: 0;
      margin-right: 10px;
      top: calc(50% - 8px);
      padding-right: 0;
      z-index: 99;
      color: #DB9A9D;
      font-size: 16px;
    }
  }
}
.search-box{
    padding:0 15px;
    .ad-board{
        height:120px;
        width:100%;
        background-image:url('../../assets/images/guang.jpeg');
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center center;
        margin-top: 10px;
        border-radius:5px;
        overflow: hidden;
        background-color: antiquewhite;
        position: relative;
        .ad-close-box{
          width:35px;
          height:18px;
          background-color: rgba(0, 0, 0, .3);
          border-radius: 5px;
          position: absolute;
          top:10px;
          right:10px;
          .ad-close{
            font-size:18px;
            color:#fff;
          }
        }
    }
    .hot-search{
        font-size:16px;
        margin-top: 10px;
        width:100%;
        padding:20px 0;
        border-radius:10px;
        // background-color: rgba(120,114,121,0.2);
        background-color:#e9e6e7 ;
        color:#656;
        .hot-title{
            text-align: left;
            padding:10px 10px;
            font-weight:bold;

        }
        .hot-search-ul{
            display: flex;
            flex-wrap: wrap;
            text-align: left;
            
            .hot-search-li{
                line-height:20px;
                padding:8px 0px;
                width:calc(50% - 10px);
                // background-color: #909090;
                background-color:#fff ;
                text-align:center;
                margin-bottom:8px ;
                color:#556;
                margin-left: 10px;
                border-radius:20px;
                box-sizing: border-box;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;                
            }
        }
    }
}
</style>